<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%-- <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>

<html>
<head>
    <meta charset="utf-8">
    <title>修改图书</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="layuimini-form">
    <input type="hidden" name="id"   value="${info.id}">
    <div class="layui-form-item">
        <label class="layui-form-label required">图书名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">图书编号</label>
        <div class="layui-input-block">
            <input type="text" name="isbn" lay-verify="required"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">图书类别</label>
        <div class="layui-input-block">
            <select name="typeId" id="typeId" lay-verify="required">
                <option value="${typeId}">请选择</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">图书作者</label>
        <div class="layui-input-block">
            <input type="text" name="author" lay-verify="required" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">图书出版社</label>
        <div class="layui-input-block">
            <input type="text" name="publish" lay-verify="required" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">图书语言</label>
        <div class="layui-input-block">
            <input type="text" name="language" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">图书价格</label>
        <div class="layui-input-block">
            <input type="number" name="price" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">出版日期</label>
        <div class="layui-input-block">
            <input type="text" name="publishDate" id="date"
                   lay-verify="date" autocomplete="off" class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图书介绍</label>
        <div class="layui-input-block">
            <textarea name="introduction" class="layui-textarea" placeholder="请输入介绍信息"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认修改</button>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate=layui.laydate,
            $ = layui.$;

        //日期
        laydate.render({
            elem: '#date',
            trigger:'click'
        });

        // 获取URL中的图书ID
        var bookId = new URLSearchParams(window.location.search).get('id');

        // 如果存在图书ID，则获取图书信息并填充表单
        if (bookId) {
            $.get("/api/book/findById", { id: bookId }, function (res) {
                if (res.code === 0 && res.data) {
                    var book = res.data;
                    console.log("修改界面book",book);
                    
                    // 将时间戳转换为yyyy-MM-dd格式
                    var publishDateStr = "";
                    if (book.publishDate) {
                        var date = new Date(book.publishDate);
                        publishDateStr = date.getFullYear() + "-" + 
                                      ("0" + (date.getMonth() + 1)).slice(-2) + "-" + 
                                      ("0" + date.getDate()).slice(-2);
                    }
                    
                    // 填充表单数据
                    //在HTML中，表单的class是 layui-form layuimini-form ，
                    // 但在JavaScript中使用 form.val('layui-form', {...}) 
                    // 来填充表单。这里的参数应该是表单的filter属性，而不是
                    // class名称。在Layui中，表单的filter属性通常通过 lay-filter 
                    // 属性设置，但我没有在HTML中看到这个属性。因此，JavaScript
                    // 中应该使用 layuimini-form 作为filter名称，而不是 layui-form 。
                    form.val('layuimini-form', {
                        "id": book.id,
                        "name": book.name,
                        "isbn": book.isbn,
                        "typeId": book.typeId,
                        "author": book.author,
                        "publish": book.publish,
                        "language": book.language,
                        "price": book.price,
                        "publishDate": publishDateStr,
                        "introduction": book.introduction
                    });
                    console.log("form.val",form.val("layuimini-form"));
                    
                    
                    // 重新渲染select，确保选中正确的图书类型
                    form.render('select');
                    
                    // 获取图书类型数据并设置下拉框
                    loadBookTypes(book.typeId);
                } else {
                    layer.msg("获取图书信息失败");
                }
            }, "json");
        }

        // 加载图书类型数据的函数
        function loadBookTypes(selectedTypeId) {
            $.get("/type/findAllList",{},function (data) {
                var list = data.data;
                var select = document.getElementById("typeId");
                // 清空现有选项，只保留第一个
                select.innerHTML = '<option value="">请选择</option>';
                
                if(list != null && list.length > 0){
                    for(var c in list){
                        var option = document.createElement("option");
                        option.setAttribute("value", list[c].id);
                        option.innerText = list[c].name;
                        
                        // 如果当前类型ID与选中的类型ID一致，设置为选中
                        if (list[c].id == selectedTypeId){
                            option.setAttribute("selected", "selected");
                        }
                        select.appendChild(option);
                    }
                }
                // 重新渲染select
                form.render('select');
            }, "json");
        }
        //动态获取图书类型的数据
        // 原来的代码已被移除，使用loadBookTypes函数代替

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var datas=data.field;//form单中的数据信息
            //向后台发送数据提交添加
            $.ajax({
                url:"/api/book/updateBookSubmit",
                type:"POST",
                // data:datas,
                contentType:'application/json;charset=UTF-8', //向服务器发送的数据是 JSON 格式
                dataType:'json', // 表示期望从服务器返回 JSON
                data:JSON.stringify(datas),
                success:function(result){
                	//alert(result);
                    if(result.code==0){//如果成功
                        layer.msg('修改成功',{
                            icon:6,
                            time:500
                        },function(){
                            parent.window.location.reload();
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        })
                    }else{
                        layer.msg("修改失败");
                    }
                }
            })
            return false;
        });
    });
</script>
</body>
</html>

